<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5/CSS position属性详解</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            padding: 20px 0;
            border-bottom: 2px solid #3498db;
        }
        
        h2 {
            color: #34495e;
            margin: 30px 0 20px;
            padding: 10px 0;
            border-left: 4px solid #3498db;
            padding-left: 15px;
        }
        
        h3 {
            color: #7f8c8d;
            margin: 20px 0 15px;
        }
        
        p {
            margin-bottom: 15px;
            font-size: 16px;
        }
        
        .position-container {
            background-color: white;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .position-type {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e1e1e1;
            border-radius: 6px;
            background-color: #f9f9f9;
        }
        
        .position-type h4 {
            color: #3498db;
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        .example {
            margin: 20px 0;
            padding: 20px;
            background-color: #f0f7ff;
            border-radius: 6px;
            border: 1px solid #ddd;
        }
        
        .code-block {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
            overflow-x: auto;
            margin: 15px 0;
        }
        
        .demo-container {
            position: relative;
            height: 400px;
            border: 2px solid #3498db;
            margin: 20px 0;
            background-color: #f9f9f9;
            overflow: hidden;
        }
        
        .demo-box {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            color: white;
            border-radius: 5px;
        }
        
        .box1 {
            background-color: #e74c3c;
        }
        
        .box2 {
            background-color: #3498db;
        }
        
        .box3 {
            background-color: #2ecc71;
        }
        
        .box4 {
            background-color: #f39c12;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
        }
        
        .comparison-table th,
        .comparison-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        .comparison-table th {
            background-color: #3498db;
            color: white;
        }
        
        .comparison-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        
        .comparison-table tr:hover {
            background-color: #e9f7fe;
        }
        
        .highlight {
            background-color: #ffffcc;
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        .sticky-nav {
            background-color: #3498db;
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: bold;
            margin: 20px 0;
            border-radius: 5px;
        }
        
        .note {
            background-color: #fffacd;
            border-left: 4px solid #ffd700;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }
        
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .position-container {
                padding: 15px;
            }
            
            .demo-container {
                height: 300px;
            }
            
            .comparison-table {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <h1>HTML5/CSS position属性详解</h1>
    
    <div class="position-container">
        <p>在CSS中，<strong>position</strong>属性用于指定元素的定位方式。通过position属性，我们可以控制元素在页面中的精确位置，打破正常的文档流布局。HTML5/CSS中，position属性共有5种取值：</p>
        
        <ul>
            <li><span class="highlight">static</span> - 默认定位</li>
            <li><span class="highlight">relative</span> - 相对定位</li>
            <li><span class="highlight">absolute</span> - 绝对定位</li>
            <li><span class="highlight">fixed</span> - 固定定位</li>
            <li><span class="highlight">sticky</span> - 粘性定位（CSS3新增）</li>
        </ul>
    </div>
    
    <h2>1. position: static（默认定位）</h2>
    <div class="position-type">
        <h4>基本特点：</h4>
        <ul>
            <li>这是元素的默认定位方式</li>
            <li>元素遵循正常的文档流（Normal Flow）</li>
            <li><code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code> 和 <code>z-index</code> 属性无效</li>
            <li>元素按照HTML中出现的顺序依次排列</li>
        </ul>
        
        <div class="example">
            <h4>示例代码：</h4>
            <div class="code-block">
.element {<br>
    position: static;<br>
    /* top、right、bottom、left等属性在此无效 */<br>
}</div>
            
            <h4>视觉效果：</h4>
            <div class="demo-container">
                <div class="demo-box box1">静态元素1</div>
                <div class="demo-box box2">静态元素2</div>
                <div class="demo-box box3">静态元素3</div>
            </div>
        </div>
        
        <h4>应用场景：</h4>
        <p>默认情况下，所有元素都是static定位，无需特别指定。适用于大多数常规布局。</p>
    </div>
    
    <h2>2. position: relative（相对定位）</h2>
    <div class="position-type">
        <h4>基本特点：</h4>
        <ul>
            <li>元素仍保留在正常文档流中</li>
            <li>元素的原始空间会被保留，不会被其他元素占据</li>
            <li>可以通过 <code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code> 属性相对于其原始位置进行偏移</li>
            <li><code>z-index</code> 属性有效，可以控制元素的堆叠顺序</li>
        </ul>
        
        <div class="example">
            <h4>示例代码：</h4>
            <div class="code-block">
.element {<br>
    position: relative;<br>
    top: 20px;      /* 相对于原始位置向下移动20px */<br>
    left: 30px;     /* 相对于原始位置向右移动30px */<br>
    z-index: 1;     /* 控制堆叠顺序 */<br>
}</div>
            
            <h4>视觉效果：</h4>
            <div class="demo-container">
                <div class="demo-box box1">元素1</div>
                <div class="demo-box box2" style="position: relative; top: 20px; left: 30px;">相对定位</div>
                <div class="demo-box box3">元素3</div>
            </div>
            <p>注意：相对定位的元素虽然偏移了位置，但它在文档流中的原始空间仍然保留。</p>
        </div>
        
        <h4>应用场景：</h4>
        <ul>
            <li>微调元素的位置</li>
            <li>作为绝对定位元素的父容器（参考点）</li>
            <li>创建堆叠效果但不影响其他元素布局</li>
        </ul>
    </div>
    
    <h2>3. position: absolute（绝对定位）</h2>
    <div class="position-type">
        <h4>基本特点：</h4>
        <ul>
            <li>元素脱离正常文档流，不再占据空间</li>
            <li>元素会相对于最近的已定位（非static）祖先元素进行定位</li>
            <li>如果没有已定位的祖先元素，则相对于<html>元素（根元素）定位</li>
            <li>可以通过 <code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code> 属性精确控制位置</li>
            <li><code>z-index</code> 属性有效，可以控制堆叠顺序</li>
        </ul>
        
        <div class="example">
            <h4>示例代码：</h4>
            <div class="code-block">
.parent {
    position: relative;  /* 父容器设为相对定位 */
}

.child {
    position: absolute;
    top: 50px;      /* 距离父容器顶部50px */
    right: 30px;    /* 距离父容器右侧30px */
    z-index: 10;    /* 控制堆叠顺序 */
}</div>
            
            <h4>视觉效果：</h4>
            <div class="demo-container" style="position: relative;">
                <div class="demo-box box1">元素1</div>
                <div class="demo-box box2" style="position: absolute; top: 50px; right: 30px;">绝对定位</div>
                <div class="demo-box box3">元素3（注意它占据了元素2的位置）</div>
            </div>
        </div>
        
        <h4>应用场景：</h4>
        <ul>
            <li>创建重叠元素</li>
            <li>精确控制元素在特定容器内的位置</li>
            <li>创建弹出菜单、下拉框等UI组件</li>
            <li>模态框、对话框等界面元素</li>
        </ul>
        
        <div class="note">
            <strong>注意：</strong>使用绝对定位时，通常需要为其父元素设置<code>position: relative;</code>，以便元素相对于父容器定位，而不是相对于整个页面。
        </div>
    </div>
    
    <h2>4. position: fixed（固定定位）</h2>
    <div class="position-type">
        <h4>基本特点：</h4>
        <ul>
            <li>元素脱离正常文档流，不再占据空间</li>
            <li>元素总是相对于浏览器窗口（视口）定位，不受滚动条影响</li>
            <li>即使页面滚动，元素也会固定在视口的特定位置</li>
            <li>可以通过 <code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code> 属性设置位置</li>
            <li><code>z-index</code> 属性有效，可以控制堆叠顺序</li>
        </ul>
        
        <div class="example">
            <h4>示例代码：</h4>
            <div class="code-block">
.element {
    position: fixed;
    top: 10px;      /* 距离视口顶部10px */
    left: 10px;     /* 距离视口左侧10px */
    z-index: 100;   /* 通常设置较高的值确保可见 */
}</div>
            
            <h4>应用场景：</h4>
            <ul>
                <li>固定导航栏</li>
                <li>返回顶部按钮</li>
                <li>页面底部的版权信息</li>
                <li>模态对话框的关闭按钮</li>
                <li>侧边栏广告</li>
            </ul>
        </div>
        
        <div class="sticky-nav" style="position: sticky; top: 0;">这个元素演示了sticky定位效果，滚动页面看看</div>
    </div>
    
    <h2>5. position: sticky（粘性定位）</h2>
    <div class="position-type">
        <h4>基本特点：</h4>
        <ul>
            <li>这是CSS3新增的定位方式，结合了relative和fixed的特点</li>
            <li>元素在正常文档流中定位，直到页面滚动到某个阈值</li>
            <li>当滚动到阈值时，元素变为固定定位，停留在指定位置</li>
            <li>必须至少指定<code>top</code>、<code>right</code>、<code>bottom</code>或<code>left</code>中的一个属性才能生效</li>
            <li><code>z-index</code> 属性有效</li>
        </ul>
        
        <div class="example">
            <h4>示例代码：</h4>
            <div class="code-block">
.element {
    position: sticky;
    top: 20px;  /* 当元素距离视口顶部20px时，变为固定定位 */
}</div>
            
            <h4>应用场景：</h4>
            <ul>
                <li>滚动时固定的表头</li>
                <li>滚动时固定的导航栏或目录</li>
                <li>滚动时高亮显示当前章节标题</li>
                <li>滚动页面时保持重要信息可见</li>
            </ul>
        </div>
        
        <div class="note">
            <strong>注意：</strong>sticky定位在某些老旧浏览器中可能不被支持。使用前请检查浏览器兼容性。
        </div>
    </div>
    
    <h2>6. 五种定位方式的对比</h2>
    <table class="comparison-table">
        <tr>
            <th>定位方式</th>
            <th>是否脱离文档流</th>
            <th>定位参考点</th>
            <th>top/right/bottom/left</th>
            <th>z-index</th>
            <th>适用场景</th>
        </tr>
        <tr>
            <td>static</td>
            <td>否</td>
            <td>无（正常文档流）</td>
            <td>无效</td>
            <td>无效</td>
            <td>常规布局</td>
        </tr>
        <tr>
            <td>relative</td>
            <td>否（保留原空间）</td>
            <td>元素自身原始位置</td>
            <td>有效</td>
            <td>有效</td>
            <td>微调位置、作为绝对定位的容器</td>
        </tr>
        <tr>
            <td>absolute</td>
            <td>是（不保留空间）</td>
            <td>最近的已定位祖先元素</td>
            <td>有效</td>
            <td>有效</td>
            <td>精确布局、重叠元素、弹出组件</td>
        </tr>
        <tr>
            <td>fixed</td>
            <td>是（不保留空间）</td>
            <td>浏览器视口</td>
            <td>有效</td>
            <td>有效</td>
            <td>固定导航栏、返回顶部按钮</td>
        </tr>
        <tr>
            <td>sticky</td>
            <td>部分（滚动前否，滚动后是）</td>
            <td>元素自身原始位置和视口</td>
            <td>必须设置（阈值）</td>
            <td>有效</td>
            <td>固定表头、滚动导航</td>
        </tr>
    </table>
    
    <h2>7. 定位元素的层级关系（z-index）</h2>
    <div class="position-container">
        <p>当元素发生重叠时，可以使用<code>z-index</code>属性来控制它们的堆叠顺序。<code>z-index</code>值越大，元素层级越高，越靠近用户。</p>
        
        <div class="note">
            <strong>注意：</strong>
            <ul>
                <li><code>z-index</code>仅对定位元素（position值不为static）有效</li>
                <li>具有相同<code>z-index</code>值的元素，按照它们在HTML中出现的顺序堆叠</li>
                <li>嵌套元素的层级受父元素的影响</li>
            </ul>
        </div>
    </div>
    
    <div style="height: 500px;"></div>
    
    <script>
        // 为了演示sticky定位效果，添加一些JavaScript来显示当前的滚动位置
        window.addEventListener('scroll', function() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            console.log('当前滚动位置：' + scrollTop + 'px');
        });
    </script>
</body>
</html>